<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="/styles/07-vue指令.css" />
    </head>
    <body>
        <div id="app">
            <table class="table">
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>头像</th>
                        <th>职务</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(emp, index) in empList" :key="index">
                        <td>{{ emp.idx }}</td>
                        <td>{{ emp.name }}</td>
                        <td>{{ emp.gender === 1 ? '男' : '女' }}</td>
                        <td>
                            <img
                                :src="emp.headimg"
                                alt="{{ emp.name }}"
                                class="avatar"
                            />
                        </td>
                        <td>
                            {{ emp.job === 1 ? '班主任' : (emp.job === 2 ?
                            '讲师' : (emp.job === 3 ? '学工主管' : (emp.job
                            === 4 ? '教研主管' : (emp.job === 5 ? '咨询师' :
                            '未知')))) }}
                        </td>
                        <td class="btn-group">
                            <button class="edit">编辑</button>
                            <button class="delete">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script src="/scripts/07-vue指令.js" type="module"></script>
    </body>
</html>
